﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - X-File loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display: block;
        }

            #info a, .button {
                color: #f00;
                font-weight: bold;
                text-decoration: underline;
                cursor: pointer;
            }
    </style>
</head>

<body>

    <div id="canvase3d"></div>  <!-- 描画領域のためのdiv要素を配置 -->


    <script src="js/three.js"></script>

    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/loaders/thrXfileLoader.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			var container, stats, controls;
			var camera, scene, renderer;
			var clock = new THREE.Clock();
			var mixers = [];

			var Texloader = null;

			init();
			function init() {
			    container = document.createElement('canvase3d');
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				scene = new THREE.Scene();
				scene.add(new THREE.AmbientLight(0x999999));
				// grid
				var gridHelper = new THREE.GridHelper( 14, 1, 0x303030, 0x303030 );
				gridHelper.position.set( 0, - 0.04, 0 );
				scene.add( gridHelper );
				// stats
				stats = new Stats();
				container.appendChild( stats.dom );
				// model
				var manager = new THREE.LoadingManager();
				manager.onProgress = function( item, loaded, total ) {
					console.log( item, loaded, total );
				};
				var onProgress = function( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
					}
				};
				var onError = function( xhr ) {
				};
				var loader = new XfileLoader(manager);
				Texloader = new THREE.TextureLoader();
                //モデルを読み込む
			    //loader.load('content/HF105_Born2.x', function (object) {
				loader.load('content/Jaorm_4.x', function (object) {
				    for (var i = 0; i < object.Meshes.length; i++) {
                        /*
				        object.Meshes[i].traverse(function (child) {
				            if (child instanceof THREE.Mesh) {
				                // pass
				            }
				            if (child instanceof THREE.SkinnedMesh) {
				                if (child.geometry.animations !== undefined || child.geometry.morphAnimations !== undefined) {
				                    child.mixer = new THREE.AnimationMixer(child);
				                    mixers.push(child.mixer);
				                    //アニメーションを割り当てる
				                    var action = child.mixer.clipAction(child.geometry.animations[0]);
				                    //開始する
				                    action.play();
				                }
				            } 
				        });
                        */
                       /*
				        this.TextureInfs = new Array();
				        for (var m = 0; m < object.TextureFiles.length; m++)
				        {
				            //var texture = new THREE.TextureLoader().load(object.TextureFiles[m].Url);
				            var texloader = new THREE.TextureLoader(manager);
				            texloader.load(object.TextureFiles[m].Url, function (object2) {
				                object.Meshes[i].materials[object.TextureFiles[m].MatIndex] = new THREE.MeshPhongMaterial({ color: 0xffffff, map: object2 });
				            }, onProgress, onError);
				            break;
				        }
                        */
				        //読み込み＆初期化が完了したモデルオブジェクトをシーンに追加する
				        scene.add(object.Meshes[i]);
				    }
                
				}, onProgress, onError );
				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( 0x666666 );
				container.appendChild( renderer.domElement );
				// controls, camera
				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 12, 0 );
				camera.position.set(2, 18, 28);
				camera.up.set(0, 1, 0);
                ///////////
				var light = new THREE.DirectionalLight(0xffffff, 2);
				light.position.set(1, 1, 1).normalize();
				scene.add(light);

				light = new THREE.DirectionalLight(0xffffff);
				light.position.set(-1, -1, -1).normalize();
				scene.add(light);

				controls.update();
				window.addEventListener( 'resize', onWindowResize, false );
				animate();
			}
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				if ( mixers.length > 0 ) {
					for ( var i = 0; i < mixers.length; i ++ ) {
						mixers[ i ].update( clock.getDelta() );
					}
				}
				stats.update();
				render();
			}
			function render() {
				renderer.render( scene, camera );
			}
    </script>

</body>
</html>